<template>
    <div>
        <h1>修改界面</h1>
        <table class="table">
            <tbody>
                <tr>
                <td>编号</td>
                <td>
                    {{ data.id }}
                </td>
            </tr>
                <tr>
                <td>用户名</td>
                <td>
                    <input type="text" v-model="data.name">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="data.password">
                </td>
            </tr>
            <tr>
                <td>房间号</td>
                <td>
                    <input type="text" v-model="data.houseNum">
                </td>
            </tr>
            <tr>
                <td>房间类型</td>
                <td>
                   <select v-model="data.houseTypes">
                    <option value="">==请选择==</option>
                    <option v-for="a in bind"  :value="a.houseTypes">{{ a.houseTypes }}</option>
                   </select>
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="upload">
                    <img :src="'https://localhost:7162/'+data.img"  width="90px" height="90px">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="修改" @click="Update">
                </td>
            </tr>
            </tbody>
            
        </table>
    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';


const router=useRouter();
const route=useRoute();

onMounted(()=>{
    Bind();
    Find();
})

const data=ref({
    "id": 0,
      "name": "",
      "password": "",
      "houseNum": "",
      "houseTypes": "",
      "img": "",
      "hType": true
})

const bind=ref([{
    "hId": 0,
    "houseTypes": ""
}])

//图片上传
const upload=(a:any)=>{
    var f=a.target.files[0];
    if(f.size>1024*1024*2){
        alert('文件不能超过2kb');
        return;
    }
    var fd=new FormData();
    fd.append("file",f);
    
    axios.post("https://localhost:7162/api/Up",fd).then(res=>{
        data.value.img=res.data;
    })
}

//绑定下拉框
const Bind=()=>{
    axios.get("https://localhost:7162/api/HouseType").then(res=>{
        bind.value=res.data;
    })
}

//反填
const Find=()=>{
    var vid=route.query.id;
    axios.get("https://localhost:7162/api/House/Find",{params:{id:vid}}).then(res=>{
        data.value=res.data;
    })
}

//修改
const Update=()=>{
    axios.post("https://localhost:7162/api/House/Update",data.value).then(res=>{
        if(res.data>0){
            alert('修改成功');
            router.push({path:"/Show"});
        }else{
            alert('修改失败');
        }
    })
}

</script>

<style scoped>

</style>